<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast} from "vant/lib/vant.es";


const router = useRouter();
const searchText = ref('');


// 跳转到加入队伍页面
const doJoinTeam = () => {
  router.push({
    path: '/team/add'
  })
}


const teamList = ref([]);

onMounted(async () => {
  listTeam();

})


/**
 * 搜索队伍
 * @param val
 */
const listTeam = async (val = '') => {
  const res = await myAxios.get("/team/list/my/create", {
    params: {
      // 这里的请求参数用的name和描述合并的searchText
      searchText: val,
      pageNum: 1
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    showFailToast("加载队伍失败,请刷新重试");
  }
}


const onSearch = (val) => {
  listTeam(val);
};


</script>

<template>
  <div id="teamPage">
    <!--搜索栏-->
    <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
    <!--    创建队伍按钮样式更改-->
    <van-button class="add-button" icon="plus" type="primary" @click="doJoinTeam"/>
    <!--  队伍卡片展示-->
    <team-card-list :teamList="teamList"/>
    <!--    添加空页面-->
    <van-empty v-if="teamList?.length < 1" description="数据为空"/>
  </div>

</template>

<style scoped>

</style>